<template>
  <div>   
    <el-table :data="kvm.irOutInfos"  @row-click='handleCurrentChanges' style="width: 100%"  highlight-current-row>      
      <el-table-column
        label="ID"
        prop="index">
      </el-table-column>
    </el-table>     
    <setForm  v-show="show">       
       <template slot="boxTop">{{$t('message.kvms.irTx')}}</template>
          <template slot="boxMain">                
           <el-row>
            <el-col :span="4" class="col4net">       
              <div class="span3" v-for="item in txLabels" :key="item">  
                <label>{{$t('message.kvms.'+item)}}</label>    
              </div>                                                           
            </el-col>
            <el-col :span="20" class="col20">
              <div class="span17">
                <el-select v-model="txCfg.format">
                  <el-option v-for="option in currenRow.txFormatSupport" :key="option" :value="option">{{option}}</el-option>
                </el-select>
              </div>               
              <div class="span17">
                <el-input v-model="txCfg.payload"></el-input>  
                <span v-show="hasUnvalidateTxpayload" class="text-style" > {{$t('message.kvms.hex32FmtErr') }} </span>                                  
              </div>               
            </el-col>
          </el-row>                           
          <el-button  class="btnsave" @click="onIrOutTx">{{$t('message.save')}}</el-button>
          </template>   
    </setForm> 
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import ebus from "../../../../libs/ebus";
import { mapState, mapActions } from "vuex";

const Hex8_Reg = /^([0-9a-fA-f]{2})*$/; //检验HEX8的正则表达式 2位2位地读，重复0~n次
const Hex16_Reg = /^([0-9a-fA-f]{4})*$/; 
const Hex32_Reg = /^([0-9a-fA-f]{8})*$/; 

export default {
  created() {
    this.loadData();
  },
  beforeDestroy(){
    this.onUnSubIrOutRx();
  },
  computed: {
    ...mapState(["kvm"]),
    hasUnvalidateTxpayload(){
      var payload = this.txCfg.payload.replace(/\s+/g,"");
      if(this.txCfg.format.toUpperCase() == 'HEX8'){
        return !Hex8_Reg.test(payload);
      } else if(this.txCfg.format.toUpperCase() == 'HEX16'){
        return !Hex16_Reg.test(payload);
      } else if(this.txCfg.format.toUpperCase() == 'HEX32'){
        return !Hex32_Reg.test(payload);
      } else{
        return false;
      }
    }
  },
  data() {
    return {
      showBtnSub: false,
      index: 0,
      currenRow: {},
      comPro: [],
      tableData: [],
      show: false,
      labels: [
        "mode",
        "baudRate",
        "parity",
        "dataBits",
        "stopBits",
        "txEn",
        "rxEn",
        "rxFormat"
      ],
      txLabels: ["txFormat", "payload"],
      txCfg: {
        format: "hex32",
        payload: ""
      },
      rxCfg: {
        format: "",
        payload: ""
      }
     
    };
  },
  components: {
    setForm
  },
  methods: {
    loadData() {
      ebus.emit("getCCInfo", this);
    },
    handleCurrentChanges(val) {
      this.currenRow = val.irOutPro;
      this.show = true;
      this.index = val.index;
    },
    onSaveComCfg() {
      var req = this.currenRow;
      req.baudRate = parseInt(req.baudRate);
      req.dataBits = parseInt(req.dataBits);
      this.onSendRequest("$method.$set.ccInf.port.irOut" + this.index + ".cfg", req);
    },
    onIrOutTx() {    
      if(this.hasUnvalidateTxpayload){
        return;
      } 
      this.txCfg.payload = this.txCfg.payload.replace(/\s+/g,"");
      api.Publish('$dstream.ccInf.port.irOut' + this.index + '.tx', JSON.stringify(this.txCfg), (msg) =>{
        console.log('IRout report: ', msg)
        var res = JSON.parse(msg);
        if (res.code == 0) {
          this.notification("Success", "");
        } else {
          this.showCodeMsg(res.code, this, res.msg);
        }
      })
    },
    onSubIrOutRx(){
      api.onSubscribe('$dstream.ccInf.port.irOut' + this.index + '.rx', (msg) =>{
        console.log('COM report: ', msg)
        var res = JSON.parse(msg);
        this.rxCfg.payload += new Date().toLocaleString() + ': ' +  res.payload + '\n'
      })
      this.showBtnSub = false;
    },
    onUnSubIrOutRx(){
      api.onUnsubscribe('$dstream.ccInf.port.irOut' + this.index + '.rx')
      this.showBtnSub = true;
    }
  }
};
</script>

<style scoped>

</style>

